<!--  -->
<template>
  <div style="overflow-y: auto; flex: 1">
    <el-tabs
      style=""
      class="home-boxofflineanalysis flex-row"
      v-model="activeName"
      @tab-click="handleTabClick"
    >
      <el-tab-pane
        class="flex-col"
        label="时长分析"
        name="first"
        :disabled="tabDisabled"
      >
        <el-descriptions
          size="medium"
          :column="1"
          :colon="false"
          v-if="activeName === 'first'"
        >
          <el-descriptions-item>
            <div class="taskview-top">
              <span>工厂：</span>
              <el-select placeholder="请选择" multiple v-model="flterValueLine">
                <el-option
                  v-for="item in optionsflterValueLine"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
              <span>工序：</span>
              <el-select
                placeholder="请选择"
                multiple
                v-model="flterValueProcess"
              >
                <el-option
                  v-for="item in optionsflterValueProcess"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
              <span>设备分类：</span>
              <el-select placeholder="请选择" multiple v-model="flterValueKind">
                <el-option
                  v-for="item in optionflterValueKind"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
              <span>设备：</span>
              <el-autocomplete
                class="inline-input"
                v-model="flterValueDevice"
                :fetch-suggestions="querySearch"
                placeholder="请输入检索"
              ></el-autocomplete>
              <span>开始时间：</span>
              <el-date-picker
                v-model="startTime"
                type="date"
                placeholder="选择日期"
              >
              </el-date-picker>
              <span>结束时间：</span>
              <el-date-picker
                v-model="endTime"
                type="date"
                placeholder="选择日期"
              >
              </el-date-picker>
              <el-button type="primary" @click="searchData">搜索</el-button>
            </div>
          </el-descriptions-item>
        </el-descriptions>

        <div class="flex-col" v-if="activeName === 'first'">
          <div class="flex-row" style="height: 200px">
            <div class="flex-col">
              <div class="table-title">
                <span class="title">设备今日报表（时长/分钟）</span>
              </div>
              <div class="table-border fixedheight" style="margin-bottom: 1vh">
                <v-chart :option="optionEquipToday" autoresize></v-chart>
              </div>
            </div>

            <div class="flex-col borderdropline">
              <div class="table-title">
                <span class="title">工序周报表（时长/分钟）</span>
              </div>
              <div
                class="table-border fixedheight"
                style="margin-bottom: 1vh; height: 100%"
              >
                <v-chart
                  :option="optionProcessWeek"
                  autoresize
                  style="width: 100%; height: 100%"
                ></v-chart>
              </div>
            </div>
          </div>

          <div class="flex-row" style="height: 200px">
            <div class="flex-col">
              <div class="table-title">
                <span class="title">月度数据（时长/分钟）</span>
              </div>
              <div
                class="table-border fixedheight"
                style="margin-bottom: 1vh; height: 100%"
              >
                <v-chart
                  :option="optionDataMonth"
                  autoresize
                  style="width: 100%; height: 100%"
                ></v-chart>
              </div>
            </div>
          </div>

          <div class="flex-row" style="height: 200px">
            <div class="flex-col">
              <div class="table-title">
                <span class="title">月度占比（时长）</span>
              </div>
              <div
                class="table-border fixedheight"
                style="margin-bottom: 1vh; height: 100%"
              >
                <v-chart
                  :option="optionMonthTimeLegthRate"
                  autoresize
                  style="width: 100%; height: 100%"
                ></v-chart>
              </div>
            </div>

            <div class="flex-col borderdropline">
              <div class="table-title">
                <span class="title">周占比（时长）</span>
              </div>
              <div
                class="table-border fixedheight"
                style="margin-bottom: 1vh; height: 100%"
              >
                <v-chart
                  :option="optionWeekTimeLegthRate"
                  autoresize
                  style="width: 100%; height: 100%"
                ></v-chart>
              </div>
            </div>

            <div class="flex-col borderdropline">
              <div class="table-title">
                <span class="title">设备分类占比（时长）</span>
              </div>
              <div
                class="table-border fixedheight"
                style="margin-bottom: 1vh; height: 100%"
              >
                <v-chart
                  :option="optionEquipRate"
                  autoresize
                  style="width: 100%; height: 100%"
                ></v-chart>
              </div>
            </div>
          </div>
        </div>
      </el-tab-pane>

      <el-tab-pane
        class="flex-col"
        label="次数分析"
        name="second"
        :disabled="tabDisabled"
      >
        <el-descriptions
          size="medium"
          :column="1"
          :colon="false"
          v-if="activeName === 'second'"
        >
          <el-descriptions-item>
            <div class="taskview-top">
              <span>工厂：</span>
              <el-select placeholder="请选择" multiple v-model="flterValueLine">
                <el-option
                  v-for="item in optionsflterValueLine"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
              <span>工序：</span>
              <el-select
                placeholder="请选择"
                multiple
                v-model="flterValueProcess"
              >
                <el-option
                  v-for="item in optionsflterValueProcess"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
              <span>设备分类：</span>
              <el-select placeholder="请选择" multiple v-model="flterValueKind">
                <el-option
                  v-for="item in optionflterValueKind"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
              <span>设备：</span>
              <el-autocomplete
                class="inline-input"
                v-model="flterValueDevice"
                :fetch-suggestions="querySearch"
                placeholder="请输入检索"
              ></el-autocomplete>
              <span>开始时间：</span>
              <el-date-picker
                v-model="startTime"
                type="date"
                placeholder="选择日期"
              >
              </el-date-picker>
              <span>结束时间：</span>
              <el-date-picker
                v-model="endTime"
                type="date"
                placeholder="选择日期"
              >
              </el-date-picker>
              <el-button type="primary" @click="searchData">搜索</el-button>
            </div>
          </el-descriptions-item>
        </el-descriptions>

        <div class="flex-col" v-if="activeName === 'second'">
          <div class="flex-row">
            <div class="flex-col">
              <div class="table-title">
                <span class="title">设备今日报表（次数）</span>
              </div>
              <div
                class="table-border fixedheight"
                style="margin-bottom: 1vh; height: 100%"
              >
                <v-chart
                  :option="optionEquipToday"
                  autoresize
                  style="width: 100%; height: 100%"
                ></v-chart>
              </div>
            </div>

            <div class="flex-col borderdropline">
              <div class="table-title">
                <span class="title">工序周报表（次数）</span>
              </div>
              <div
                class="table-border fixedheight"
                style="margin-bottom: 1vh; height: 100%"
              >
                <v-chart
                  :option="optionProcessWeek"
                  autoresize
                  style="width: 100%; height: 100%"
                ></v-chart>
              </div>
            </div>
          </div>

          <div class="flex-row">
            <div class="flex-col">
              <div class="table-title">
                <span class="title">月度数据（次数）</span>
              </div>
              <div
                class="table-border fixedheight"
                style="margin-bottom: 1vh; height: 100%"
              >
                <v-chart
                  :option="optionDataMonth"
                  autoresize
                  style="width: 100%; height: 100%"
                ></v-chart>
              </div>
            </div>
          </div>

          <div class="flex-row">
            <div class="flex-col">
              <div class="table-title">
                <span class="title">月度占比（次数）</span>
              </div>
              <div
                class="table-border fixedheight"
                style="margin-bottom: 1vh; height: 100%"
              >
                <v-chart
                  :option="optionMonthTimeLegthRate"
                  autoresize
                  style="width: 100%; height: 100%"
                ></v-chart>
              </div>
            </div>

            <div class="flex-col borderdropline">
              <div class="table-title">
                <span class="title">周占比（次数）</span>
              </div>
              <div
                class="table-border fixedheight"
                style="margin-bottom: 1vh; height: 100%"
              >
                <v-chart
                  :option="optionWeekTimeLegthRate"
                  autoresize
                  style="width: 100%; height: 100%"
                ></v-chart>
              </div>
            </div>

            <div class="flex-col borderdropline">
              <div class="table-title">
                <span class="title">设备分类占比（次数）</span>
              </div>
              <div
                class="table-border fixedheight"
                style="margin-bottom: 1vh; height: 100%"
              >
                <v-chart
                  :option="optionEquipRate"
                  autoresize
                  style="width: 100%; height: 100%"
                ></v-chart>
              </div>
            </div>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { format } from "echarts/core";
import $http from "../../../utils/apiHelper";
export default {
  data() {
    const today = new Date(); // 获取当前日期和时间
    const tomorrow = new Date(today.getTime() + 24 * 60 * 60 * 1000); // 获取明天的日期和时间

    const format = (date) =>
      `${date.getFullYear()}-${(date.getMonth() + 1)
        .toString()
        .padStart(2, "0")}-${date
        .getDate()
        .toString()
        .padStart(2, "0")} 00:00:00`; // 将日期对象格式化为"YYYY-MM-DD 00:00:00"格式的字符串的函数
    return {
      activeName: "first", // 当前tab

      tabDisabled: false, // tab是否被禁用

      optionsflterValueLine: [], // 存储工厂过滤值的数组
      optionsflterValueProcess: [], // 存储工序过滤值的数组
      optionsflterValueDevice: [], // 存储设备过滤值的数组
      optionflterValueKind: [
        {
          value: 0,
          label: "在线设备",
        },
        {
          value: 1,
          label: "离线设备",
        },
        {
          value: 2,
          label: "监测设备",
        },
      ], // 存储种类过滤值的数组，包含三种设备种类

      flterValueLine: [], // 存储工厂选择器过滤值的数组
      flterValueProcess: [], // 存储选定的工序过滤值的数组
      flterValueDevice: "", // 存储选定的设备过滤值的字符串
      flterValueKind: [], // 存储选定的设备种类过滤值的数组
      startTime: format(today), // 存储开始时间，使用当前时间作为默认值
      endTime: format(tomorrow), // 存储结束时间，使用明天的时间作为默认值

      optionEquipToday: {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        xAxis: {
          type: "value",
          boundaryGap: false,
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
          splitLine: {
            show: false,
          },
        },
        yAxis: {
          type: "category",
          data: [],
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: false,
          },
        },
        visualMap: {
          orient: "horizontal",
          left: "center",
          min: 0,
          max: 1440,
          // Map the score column to color
          dimension: 0,
          inRange: {
            color: ["#65B581", "#FFCE34", "#FD665F"],
          },
          show: false,
        },
        series: [
          {
            type: "bar",
            data: [],
            label: {
              show: true, //开启显示
              textStyle: {
                //数值样式
                color: "white", //字体颜色
                fontSize: 15, //字体大小
              },
            },
          },
        ],
        dataZoom: [
          {
            type: "slider",
            maxValueSpan: 10, //显示数据的条数(默认显示10个)
            show: true,
            yAxisIndex: [0],
            left: "95%", //滑动条位置
            start: 100, //默认为0
            end: 50, //默认为100
            orient: "vertical",
            filterMode: "empty",
            width: "1%",
          },
        ],
      }, //设备今日报表（横柱状）
      optionProcessWeek: {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999",
            },
          },
        },
        legend: {},
        xAxis: [
          {
            type: "category",
            data: [],
            axisPointer: {
              type: "shadow",
            },
          },
        ],
        yAxis: [
          {
            type: "value",
          },
          {
            type: "value",
          },
        ],
        grid: {
          left: "3%",
          right: "10%",
          bottom: "3%",
          containLabel: true,
        },
        series: [
          {
            name: "周掉线时长",
            type: "bar",
            tooltip: {
              valueFormatter: function (value) {
                return value + " min";
              },
            },
            itemStyle: {
              normal: {
                color: function (d) {
                  return (
                    "#" +
                    Math.floor(Math.random() * (256 * 256 * 256 - 1)).toString(
                      16
                    )
                  );
                },
              },
            },
            data: [],
          },
          {
            name: "统计时长",
            type: "line",
            yAxisIndex: 1,
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  textStyle: {},
                  formatter: function (params) {
                    return params.name + "  " + params.value;
                  },
                },
                lineStyle: {
                  width: 3, // 设置虚线宽度
                  type: "solid", // 虚线'dotted' 实线'solid'
                },
              },
            },
            tooltip: {
              valueFormatter: function (value) {
                return value + " min";
              },
            },
            data: [],
          },
        ],
      }, //工序周报表（折线+柱状）
      optionDataMonth: {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {
          orient: "vertical",
          left: "right",
        },
        grid: {
          left: "3%",
          right: "10%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: [],
          },
        ],
        barWidth: "50%", //  控制柱子的宽度
        barGap: "70%", //  控制柱子的间隔
        yAxis: [
          {
            type: "value",
          },
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "工序掉线时长累计",
            type: "line",
            yAxisIndex: 1,
            smooth: true,
            data: [],
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  textStyle: {},
                  formatter: function (params) {
                    return params.value;
                  },
                },
                lineStyle: {
                  width: 3, // 设置虚线宽度
                  type: "solid", // 虚线'dotted' 实线'solid'
                },
              },
            },
          },
        ],
      }, //月度数据表（折线+堆叠）
      optionMonthTimeLegthRate: {
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "right",
        },
        series: [
          {
            name: "",
            type: "pie",
            radius: "60%",
            label: {
              formatter: "{b|{b}}\n{per|{d}%}",
              borderWidth: 0,
              borderRadius: 4,
              rich: {
                b: {
                  align: "center",
                  fontSize: 14,
                  lineHeight: 20,
                },
                per: {
                  align: "center",
                  padding: [3, 4],
                  borderRadius: 4,
                },
              },
            },
            data: [],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      }, //月度占比（饼图）
      optionWeekTimeLegthRate: {
        tooltip: {
          trigger: "item",
        },
        label: {
          formatter: "{b|{b}}\n{per|{d}%}",
          borderWidth: 0,
          borderRadius: 4,
          rich: {
            b: {
              align: "center",
              fontSize: 14,
              lineHeight: 20,
            },
            per: {
              align: "center",
              padding: [3, 4],
              borderRadius: 4,
            },
          },
        },
        legend: {
          orient: "vertical",
          left: "right",
        },
        series: [
          {
            name: "",
            type: "pie",
            radius: "60%",
            data: [],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      }, //周占比饼图（饼图）
      optionEquipRate: {
        tooltip: {
          trigger: "item",
        },
        label: {
          formatter: "{b|{b}}\n{per|{d}%}",
          borderWidth: 0,
          borderRadius: 4,
          rich: {
            b: {
              align: "center",
              fontSize: 14,
              lineHeight: 20,
            },
            per: {
              align: "center",
              padding: [3, 4],
              borderRadius: 4,
            },
          },
        },
        legend: {
          orient: "vertical",
          left: "right",
        },
        series: [
          {
            name: "",
            type: "pie",
            radius: "60%",
            data: [],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      }, //周占比饼图（饼图）
    };
  },
  methods: {
    //图表数据查询
    searchData() {
      this.tabDisabled = true; // 查询图表数据时禁用选项卡

      // 清空之前的图表数据
      this.optionEquipToday.yAxis.data = [];
      this.optionEquipToday.series[0].data = [];

      this.optionProcessWeek.xAxis[0].data = [];
      this.optionProcessWeek.series[0].data = [];
      this.optionProcessWeek.series[1].data = [];

      this.optionDataMonth.xAxis[0].data = [];
      this.optionDataMonth.series[0].data = [];
      for (let i = 1; i < this.optionDataMonth.series.length; i++) {
        this.optionDataMonth.series[i].data = [];
      }

      this.optionMonthTimeLegthRate.series[0].data = [];
      this.optionWeekTimeLegthRate.series[0].data = [];

      this.optionEquipRate.series[0].data = [];
      // 清空之前的图表数据

      // 构造请求参数
      let message = {
        LineList: this.flterValueLine,
        ProcessList: this.flterValueProcess,
        Equip: this.flterValueDevice,
        EquipCategoryList: this.flterValueKind,
        StartTime: this.startTime,
        EndTime: this.endTime,
        IsTimeLength: this.activeName == "first",
      };

      try {
        $http({
          method: "post",
          url: "DropAnalysisPage/GetDropAnalysisData",
          headers: {
            "Content-Type": "application/json;charset=UTF-8",
          },
          data: message,
        }).then((result) => {
          if (result.Status === 200) {
            //图表赋值
            this.optionEquipToday.yAxis.data = result.Data[0].XColltctions;
            this.optionEquipToday.series[0].data = result.Data[0].BarDatas;

            this.optionProcessWeek.xAxis[0].data = result.Data[1].XColltctions;
            this.optionProcessWeek.series[0].data = result.Data[1].BarDatas;
            this.optionProcessWeek.series[1].data = result.Data[1].BarDatas;

            this.optionDataMonth.xAxis[0].data = result.Data[2].XColltctions;
            this.optionDataMonth.series[0].data = result.Data[2].LineDatas;
            this.optionDataMonth.series = this.optionDataMonth.series.slice(
              0,
              1
            );
            result.Data[2].BarDatas.forEach((item) => {
              const newData = {
                name: item.MemberName,
                type: "bar",
                stack: "Ad",
                emphasis: {
                  focus: "series",
                },
                data: item.MemberNum,
              };
              this.optionDataMonth.series.push(newData);
            });
            result.Data[3].PieDatas.forEach((item) => {
              this.optionMonthTimeLegthRate.series[0].data.push({
                name: item.name,
                value: item.value,
              });
            });
            result.Data[4].PieDatas.forEach((item) => {
              this.optionWeekTimeLegthRate.series[0].data.push({
                name: item.name,
                value: item.value,
              });
            });
            result.Data[5].PieDatas.forEach((item) => {
              this.optionEquipRate.series[0].data.push({
                name: item.name,
                value: item.value,
              });
            });
            //图表赋值

            //开放tab切换
            this.tabDisabled = false;
            return;
          }
          this.$message.error(result.Message);
          this.tabDisabled = false;
        });
      } catch (err) {
        this.$message.error(err);
        this.tabDisabled = false;
      }
    },
    //图表数据查询

    //切换tab
    handleTabClick() {
      (this.flterValueLine = []),
        (this.flterValueProcess = []),
        (this.flterValueKind = []),
        (this.flterValueDevice = ""),
        // (this.startTime = this.format(this.thirtyDaysAgo)),
        // (this.endTime = this.format(this.tomorrow)),
        this.searchData();
    },
    //切换tab

    ///设备模糊检索
    querySearch(queryString, cb) {
      var devices = this.optionsflterValueDevice;
      // 根据输入的查询字符串过滤设备列表
      var results = queryString
        ? devices.filter(this.createFilter(queryString))
        : devices;
      // 调用回调函数返回建议列表的数据
      cb(results);
    },

    createFilter(queryString) {
      // 创建用于过滤设备的函数
      return (devices) => {
        // 将设备的值转换为小写，并检查查询字符串是否匹配设备值的开头
        return (
          devices.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
        );
      };
    },
    ///设备模糊检索

    ///查询所有过滤条件
    loadAllOptions() {
      try {
        $http({
          method: "get",
          url: "/AlarmQueryPage/GetAlarmQuerySearchInfo",
          headers: {
            "Content-Type": "application/json;charset=UTF-8",
          },
        }).then((result) => {
          if (result.Status === 200) {
            this.optionsflterValueLine = result.Data[0].Option;
            this.optionsflterValueProcess = result.Data[1].Option;
            this.optionsflterValueDevice = result.Data[2].Option;
            return;
          }
          this.$message.error(result.Message);
          //this.LoadEARuleFuncList = result.data.Content;
        });
      } catch (err) {
        this.$message.error(err);
      }
    },
    ///查询所有过滤条件
  },
  created() {
    this.loadAllOptions();
    this.searchData();
  },
  mounted() {},
};
</script>
<style  scoped>
.fixedheight {
  flex: 1;
  overflow: hidden;
}
/* @import url(); 引入css类 */
</style>